doctype html
html(lang='en')

    head

        meta(charset='utf-8')
        meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
        meta(name='description', content='')
        meta(name='author', content='')

        title New Age - Start Bootstrap Theme

        link(rel='icon', type='image/x-icon', href='assets/favicon.ico')

        // Bootstrap icons
        link(href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css', rel='stylesheet')

        // Google fonts
        link(rel='preconnect', href='https://fonts.gstatic.com')
        link(href='https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,600;1,600&display=swap', rel='stylesheet')
        link(href='https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300;0,500;0,600;0,700;1,300;1,500;1,600;1,700&display=swap', rel='stylesheet')
        link(href='https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,400;1,400&display=swap', rel='stylesheet')

        // Core theme CSS (includes Bootstrap)
        link(href='css/styles.css', rel='stylesheet')

    body#page-top

        // Navigation
        nav#mainNav.navbar.navbar-expand-lg.navbar-light.fixed-top.shadow-sm
            .container.px-5
                a.navbar-brand.fw-bold(href='#page-top') Start Bootstrap
                button.navbar-toggler(type='button', data-bs-toggle='collapse', data-bs-target='#navbarResponsive', aria-controls='navbarResponsive', aria-expanded='false', aria-label='Toggle navigation')
                    | Menu
                    i.bi-list
                #navbarResponsive.collapse.navbar-collapse
                    ul.navbar-nav.ms-auto.me-4.my-3.my-lg-0
                        li.nav-item
                            a.nav-link.me-lg-3(href='#features') Features
                        li.nav-item
                            a.nav-link.me-lg-3(href='#download') Download
                    button.btn.btn-primary.rounded-pill.px-3.mb-2.mb-lg-0(data-bs-toggle='modal', data-bs-target='#feedbackModal')
                        span.d-flex.align-items-center
                            i.bi-chat-text-fill.me-2
                            span.small Send Feedback

        // Mashead header
        header.masthead
            .container.px-5
                .row.gx-5.align-items-center
                    .col-lg-6
                        // Mashead text and app badges
                        .mb-5.mb-lg-0.text-center.text-lg-start
                            h1.display-1.lh-1.mb-3 Showcase your app beautifully.
                            p.lead.fw-normal.text-muted.mb-5 Launch your mobile app landing page faster with this free, open source theme from Start Bootstrap!
                            .d-flex.flex-column.flex-lg-row.align-items-center
                                a.me-lg-3.mb-4.mb-lg-0(href='#!')
                                    img.app-badge(src='assets/img/google-play-badge.svg', alt='...')
                                a(href='#!')
                                    img.app-badge(src='assets/img/app-store-badge.svg', alt='...')
                    .col-lg-6
                        // Masthead device mockup feature
                        .masthead-device-mockup
                            include includes/gradient-circle
                            include includes/shape-1
                            include includes/shape-2
                            .device-wrapper
                                .device(data-device='iPhoneX', data-orientation='portrait', data-color='black')
                                    .screen.bg-black
                                        // PUT CONTENTS HERE:
                                        // * * This can be a video, image, or just about anything else.
                                        // * * Set the max width of your media to 100% and the height to
                                        // * * 100% like the demo example below.
                                        video(muted='muted', autoplay='', loop='', style='max-width: 100%; height: 100%;')
                                            source(src='assets/img/demo-screen.mp4', type='video/mp4')

        // Quote/testimonial aside
        aside.text-center.bg-gradient-primary-to-secondary
            .container.px-5
                .row.gx-5.justify-content-center
                    .col-xl-8
                        .h2.fs-1.text-white.mb-4 "An intuitive solution to a common problem that we all face, wrapped up in a single app!"
                        img(src='assets/img/tnw-logo.svg', alt='...', style='height: 3rem;')

        // App features section
        section#features
            .container.px-5
                .row.gx-5.align-items-center
                    .col-lg-8.order-lg-1.mb-5.mb-lg-0
                        .container-fluid.px-5
                            .row.gx-5
                                .col-md-6.mb-5
                                    // Feature item
                                    .text-center
                                        i.bi-phone.icon-feature.text-gradient.d-block.mb-3
                                        h3.font-alt Device Mockups
                                        p.text-muted.mb-0 Ready to use HTML/CSS device mockups, no Photoshop required!
                                .col-md-6.mb-5
                                    // Feature item
                                    .text-center
                                        i.bi-camera.icon-feature.text-gradient.d-block.mb-3
                                        h3.font-alt Flexible Use
                                        p.text-muted.mb-0 Put an image, video, animation, or anything else in the screen!
                            .row
                                .col-md-6.mb-5.mb-md-0
                                    // Feature item
                                    .text-center
                                        i.bi-gift.icon-feature.text-gradient.d-block.mb-3
                                        h3.font-alt Free to Use
                                        p.text-muted.mb-0 As always, this theme is free to download and use for any purpose!
                                .col-md-6
                                    // Feature item
                                    .text-center
                                        i.bi-patch-check.icon-feature.text-gradient.d-block.mb-3
                                        h3.font-alt Open Source
                                        p.text-muted.mb-0 Since this theme is MIT licensed, you can use it commercially!
                    .col-lg-4.order-lg-0
                        // Features section device mockup
                        .features-device-mockup
                            include includes/gradient-circle
                            include includes/shape-1
                            include includes/shape-2
                            .device-wrapper
                                .device(data-device='iPhoneX', data-orientation='portrait', data-color='black')
                                    .screen.bg-black
                                        // PUT CONTENTS HERE:
                                        // * * This can be a video, image, or just about anything else.
                                        // * * Set the max width of your media to 100% and the height to
                                        // * * 100% like the demo example below.
                                        video(muted='muted', autoplay='', loop='', style='max-width: 100%; height: 100%;')
                                            source(src='assets/img/demo-screen.mp4', type='video/mp4')

        // Basic features section
        section.bg-light
            .container.px-5
                .row.gx-5.align-items-center.justify-content-center.justify-content-lg-between
                    .col-12.col-lg-5
                        h2.display-4.lh-1.mb-4 Enter a new age of web design
                        p.lead.fw-normal.text-muted.mb-5.mb-lg-0 This section is perfect for featuring some information about your application, why it was built, the problem it solves, or anything else! There's plenty of space for text here, so don't worry about writing too much.
                    .col-sm-8.col-md-6
                        .px-5.px-sm-0
                            img.img-fluid.rounded-circle(src='https://source.unsplash.com/u8Jn2rzYIps/900x900', alt='...')

        // Call to action section
        section.cta
            .cta-content
                .container.px-5
                    h2.text-white.display-1.lh-1.mb-4
                        | Stop waiting.
                        br
                        | Start building.
                    a.btn.btn-outline-light.py-3.px-4.rounded-pill(href='https://startbootstrap.com/theme/new-age', target='_blank') Download for free

        // App badge section
        section#download.bg-gradient-primary-to-secondary
            .container.px-5
                h2.text-center.text-white.font-alt.mb-4 Get the app now!
                .d-flex.flex-column.flex-lg-row.align-items-center.justify-content-center
                    a.me-lg-3.mb-4.mb-lg-0(href='#!')
                        img.app-badge(src='assets/img/google-play-badge.svg', alt='...')
                    a(href='#!')
                        img.app-badge(src='assets/img/app-store-badge.svg', alt='...')

        // Footer
        footer.bg-black.text-center.py-5
            .container.px-5
                .text-white-50.small
                    .mb-2 &copy; Your Website 2023. All Rights Reserved.
                    a(href='#!') Privacy
                    span.mx-1 &middot;
                    a(href='#!') Terms
                    span.mx-1 &middot;
                    a(href='#!') FAQ
        
        include includes/feedback-modal.pug

        // Bootstrap core JS
        script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js')

        // Core theme JS
        script(src='js/scripts.js')

        // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
        // * *                               SB Forms JS                               * *
        // * * Activate your form at https://startbootstrap.com/solution/contact-forms * *
        // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

        script(src='https://cdn.startbootstrap.com/sb-forms-latest.js')
